<!--
 * @Author: zhangyang
 * @Date: 2022-05-30 16:28:37
 * @LastEditTime: 2022-06-23 17:02:55
 * @Description: 菜单管理
-->
<script lang="ts" setup>
import { getMenuList, changeMenuItem, addMenuItem, deleteMenu } from '@/api/menu';
import type { NavArrItem } from '@/typings';
import { Icons } from '@/conf';
import useFormMode from '@/hooks/useFormMode';
import type { TableDataItem, TableHeadItemPro } from '@/typings/table';
import { NButton, NSpace, NSwitch, type FormInst } from 'naive-ui';
import { expandNodeKeys } from '@/stores';

const menuList = ref<TableDataItem<NavArrItem>[]>([]);

const topMenuOption = ref<any>([]);

const FORM_TEMP: NavArrItem = {
  breadcrumb: 0,
  component: '',
  createdAt: '',
  creator: '',
  icon: 'store',
  id: 0,
  name: '',
  not_dev: 0,
  parentId: 0,
  path: '',
  permission: '',
  redirect: '',
  sort: 0,
  status: 1,
  title: '',
  updatedAt: '',
  visible: 1
};
const getList = async () => {
  const list = await getMenuList();
  menuList.value = deepClone(list);
  topMenuOption.value = [
    { title: '顶级目录', children: deepClone(list), id: 0 }
  ];
};

const {
  isAdd,
  isEdit,
  edit,
  del,
  sure,
  clear,
  form,
  formRef,
  // @ts-ignore
  validForm
} = useFormMode(FORM_TEMP, {
  // @ts-ignore
  addCbk: async () => {
    const res: boolean = await validForm();
    if (res) {
      const v = deepClone(form.value);
      clear();
      await addMenuItem(v);
      window.$message.success('新增成功！');
    }
    return res;
  },
  // @ts-ignore
  modCbk: async () => {
    const res: boolean = await validForm();
    if (res) {
      const v = deepClone(form.value);
      clear();
      await changeMenuItem(v);
      window.$message.success('修改成功！');
    }
    return res;
  },
  delCbk: async (row) => {
    await deleteMenu(row.id.toString());
    window.$message.success('删除成功！');
  },
  cgEffect: () => getList(),
}, '确定要删除菜单吗？此操作不可逆');

const renderOperate = (row: TableDataItem<NavArrItem>) => {
  return h(NSpace, {}, {
    default: () => [
      h(
        NButton,
        { style: 'margin-right:8px;',type: 'info', size: 'small', ghost: true, onClick: () => edit(row) },
        { default: () => '编辑' }
      ),
      h(
        NButton,
        { type: 'error', size: 'small', ghost: true, onClick: () => del(row) },
        { default: () => '删除' }
      )
    ]
  });
};

const iconList = [...Object.entries(Icons)].map(([value, i]) => ({
  value,
  label: () => h(i)
}));

const tableHead: TableHeadItemPro<NavArrItem>[] = [
  { title: '英文名称', key: 'name' },
  { title: '标题', key: 'title' },
  // @ts-ignore
  { title: '图标', key: 'icon', render: (row) => h(Icons[row.icon]) },
  { title: '同级排序', key: 'sort' },
  { title: '页面路径', key: 'component' },
  { title: '展示', key: 'visible', render: (row) => h(NSwitch, { 
      size: 'small', 
      checkedValue: 1,
      uncheckedValue: 0, 
      value: row.visible,
      onUpdateValue: async (visible) => {
        await changeMenuItem({ id: row.id, visible });
        window.$message.success('修改成功！');
        getList();
      }
    })
  },
  { title: '创建人', key: 'creator' },
  { title: '操作', key: 'id', fixed: 'right', width: '150', render: renderOperate }
];

getList();
</script>
<template>
  <div>
    <div m-2>
      <NButton type="primary" ghost @click="isAdd=true">新增菜单</NButton>
    </div>
    <YoungTablePro
      :table-data="menuList"
      :table-head="tableHead"
      :row-key="(item: NavArrItem) => item.id"
      v-model:expanded-row-keys="expandNodeKeys"
    />
    <YoungDialog
      :is-add="isAdd"
      :is-edit="isEdit"
      @sure="sure"
      @clear="clear"
      real-title="修改菜单信息"
    >
      <template #body>
        <NForm
          ref="formRef"
          :model="form"
          label-placement="left"
          label-width="100"
        >
          <NFormItem label="上级目录">
            <NCascader
              clearable
              v-model:value="form.parentId"
              expand-trigger="hover"
              :options="topMenuOption"
              :default-value="0"
              value-field="id"
              label-field="title"
              check-strategy="all"
              :show-path="false"
            />
          </NFormItem>
          <NFormItem
            label="英文名称"
            path="name"
            :rule="[{ required: true, message: '请输入英文名', trigger:'blur' }]"
          >
            <NInput v-model:value="form.name" />
          </NFormItem>
          <NFormItem
            label="标题"
            path="title"
            :rule="[{ required: true, message: '请输入标题', trigger: 'blur' }]"
          >
            <NInput v-model:value="form.title" />
          </NFormItem>
          <NFormItem label="图标">
            <NSelect v-model:value="form.icon" :options="iconList" />
          </NFormItem>
          <NFormItem label="排序">
            <NInputNumber v-model:value="form.sort" clearable />
          </NFormItem>
          <NFormItem
            label="路径"
          >
            <NInput v-model:value="form.component" />
          </NFormItem>
        </NForm>
      </template>
    </YoungDialog>
  </div>
</template>
<route lang="yaml">
meta:
  title: 菜单管理
  authPath: /system/menuList
</route>
<style lang="scss" scoped>
:deep(.n-data-table .n-data-table-td){
  padding: 3px;
  font-size: 13px;
}
</style>